<template>
  <div>
    <!-- 标题栏 -->
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:title>用户注册</template>
    </nav-bar>
    <!-- logo -->
    <div style="margin-top: 10px">
      <div style="padding: 40px">
        <van-image
          width="10rem"
          height="10rem"
          fit="contain"
          src="https://pweb.d.ireader.com/static/images/web-logo.png"
        />
      </div>
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="password_confirmation"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再次密码"
          :rules="[{ required: true, message: '请再次填写密码' }]"
        />
        <van-field
          v-model="email"
          type="text"
          name="邮箱"
          label="邮箱"
          placeholder="填写邮箱"
          :rules="[{ required: true, message: '请确认邮箱格式' }]"
        />
      </van-cell-group>
      <div class="link-login" @click="$router.push({ path: '/login' })">
        已有账号，立即登录
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import NavBar from "components/common/NavBar.vue";
import { reactive, toRefs } from "@vue/reactivity";
//导入认证接口的文件
import { register } from "network/user.js";
//导图提示组件
import { Notify } from "vant";
//注册成功提示框
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  name: "RegisterView",
  components: {
    NavBar,
  },
  setup() {
    //路由
    const router = useRouter();
    //用户名
    const userinfo = reactive({
      name: "",
      password: "",
      password_confirmation: "",
      email: "",
    });
    const onSubmit = () => {
      //判断两次密码不相同
      if (userinfo.password != userinfo.password_confirmation) {
        //提示内容
        Notify("两次密码不一致");
      } else {
        register(userinfo).then((res) => {
          //输出错误信息
          if (res.status == "201") {
            Toast.success("注册成功");
            setTimeout(() => {
              router.push("/login");
            }, 1000);
          }
        });
      }
    };
    return {
      onSubmit,
      ...toRefs(userinfo),
    };
  },
};
</script>

<style>
.link-login {
  float: left;
  margin: 20px 0px 20px 40px;
  color: var(--color-high-text);
} 
</style>